import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, Image, StyleSheet, ImageBackground } from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import { isArrayFn } from 'src/utils/JSTypeUtil'
import { getGenderChinese, getUserAvatorLocalCByGender } from 'src/utils/ConfigUtil'
import DefaultImage from '../image/DefaultImage'
import { formatTime, todayYestodayTime } from '../../utils/TimeUtil'
import { getEducationByValue } from '../../utils/ConfigUtil'
import CustomButton from 'src/components/button/CustomButton'
import { generateFuzzyQuery } from '../../utils/FuzzyQueryUtil'

const workNatureMap = new Map([
  ['全职', require('@/imgC/home/tag_quanzhi.png')],
  ['兼职', require('@/imgC/home/tag_jianzhi.png')],
  ['实习', require('@/imgC/home/tag_shixi.png')]
])
const introPLaceHolder = '这家伙很懒,什么都没写'
export default class PersonCell extends React.PureComponent {
  static propTypes = {
    item: PropTypes.object,
    showTime: PropTypes.bool,
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    introStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    bottomViewStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    rightViewStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    threeDotPress: PropTypes.func,
    showLocation: PropTypes.bool,
    showMore: PropTypes.bool,
    noBorderBottom: PropTypes.bool
  }

  static defaultProps = {
    showTime: false,
    showLocation: true,
    showMore: true,
    noBorderBottom: false
  }

  /**
   * 获取地址
   * */
  _getAddress = () => {
    const { landmark: { cityName, currentLocation = {} }, item: { postWorkLocations = [], distance } } = this.props
    // console.log(this.props, 'propDates')
    const address = {
      addressName: '',
      distance: '',
      areaName: ''
    }
    if (postWorkLocations.length > 0) {
      const cityReg = generateFuzzyQuery(cityName)
      const workLocations = postWorkLocations.reduce((workLocations, currentValue) => {
        if (cityReg.test(currentValue.cityName) || cityReg.test(currentValue.address)) { // 如果城市或者地址里面包含当前的位置，就选中
          workLocations.push(currentValue)
        }
        return workLocations
      }, [])
      if (workLocations.length > 0) {
        address.addressName = workLocations[0].addressSimple || workLocations[0].address
        address.areaName = workLocations[0].areaName
        address.distance = distance ? `${Number(distance / 1000).toFixed(2)}km` : getDistance(currentLocation.lat, currentLocation.lng, workLocations[0].latitude, workLocations[0].longitude)
      }
    }
    return address
  }

  render() {
    const { style, item, showTime, introStyle, bottomViewStyle, rightViewStyle, threeDotPress, showLocation, showMore, noBorderBottom } = this.props
    let comprehensive = {}
    if (item.comprehensive) {
      comprehensive = JSON.parse(item.comprehensive)
    }
    if (comprehensive.workNature && !isArrayFn(comprehensive.workNature)) {
      comprehensive.workNature = [comprehensive.workNature]
    }
    if (comprehensive.workCategory && comprehensive.workCategory.length > 3) {
      comprehensive.workCategory = comprehensive.workCategory.splice(0, 3)
    }
    const address = this._getAddress()
    return (
      <View style={[styles.cell]}>
        <View style={styles.leftView}>
          <DefaultImage
            style={styles.avator}
            source={{ uri: item.avatarUrl }}
            errorSource={getUserAvatorLocalCByGender(item.gender, item.userId)}
          />
        </View>
        <View style={[styles.rightView].concat(rightViewStyle)}>
          <View style={styles.titWrap}>
            <View style={styles.titWrapLeft}>
              <Text style={styles.userName}>{item.userName}</Text>
              <View style={styles.personPropsView}>
                <Text
                  style={styles.genderText}>{getGenderChinese((item.gender === 'male' || ('' + item.gender) === '1') ? 'male' : 'female') + '·'}</Text>
                <Text style={styles.genderText}>{item.age + '岁·'}</Text>
                <Text style={styles.genderText}>{getEducationByValue(item.education)}</Text>
              </View>
            </View>
            {
              showMore && (
                <CustomButton onPress={threeDotPress} params={item} style={styles.threeDotView}>
                  <CustomImage style={styles.threeDotImg} source={require('src/imgC/home/more.png')} />
                </CustomButton>
              )
            }
          </View>
          <Text numberOfLines={2} style={[styles.intro].concat(introStyle)}>{item.intro || introPLaceHolder}</Text>
          {
            showTime ? (
              <Text
                style={styles.bottomRightText}>{todayYestodayTime(new Date(formatTime(item.utcCreated)).getTime(), true)}</Text>
            ) : (
              <View style={[styles.tagWrap].concat(bottomViewStyle)}>
                {!!comprehensive.workCategory && comprehensive.workCategory.filter(e => e).map((item, index) => {
                  return (<Text
                    key={index}
                    style={styles.tagText}>{'#' + item}
                  </Text>)
                })}
              </View>
            )
          }
          {/* {
            showLocation &&
            <ImageBackground style={styles.bottomAddressView} source={require('src/imgC/home/location_bg.png')}>
              <View style={styles.addressView}>
                <CustomImage style={styles.locationImg} source={require('src/imgC/home/location_icon_gray.png')} />
                <Text style={styles.addressText}>{address.addressName}</Text>
              </View>
            </ImageBackground>
          } */}
          {!noBorderBottom && <View style={{ borderBottomColor: '#f1f1f1', borderBottomWidth: ScaleS(1), marginTop: ScaleS(13) }} />}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  cell: {
    width: '100%',
    paddingTop: ScaleS(20),
    paddingHorizontal: ScaleS(20),
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  leftView: {
    width: ScaleS(40),
    height: ScaleS(40),
    position: 'relative'
  },
  avator: {
    width: ScaleS(40),
    height: ScaleS(40),
    resizeMode: 'cover',
    borderRadius: ScaleS(20)
  },
  gender: {
    position: 'absolute',
    top: ScaleS(3),
    right: ScaleS(-9),
    width: ScaleS(18)
  },
  rightView: {
    marginLeft: ScaleS(10),
    flex: 1,
    paddingBottom: ScaleS(14)
    // borderBottomWidth: ScaleS(1),
    // borderStyle: 'solid',
    // borderColor: 'rgba(120, 120, 120, .1)'
  },
  titWrap: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between'
  },
  titWrapLeft: {
    flexDirection: 'column',
    height: ScaleS(40),
    justifyContent: 'center',
    marginRight: ScaleS(7)
  },
  userName: {
    color: '#3C3C3C',
    fontSize: ScaleT(14),
    fontWeight: '500'
  },
  threeDotView: {
    height: ScaleS(15),
    alignItems: 'center',
    justifyContent: 'center'
  },
  threeDotImg: {
    width: ScaleS(20),
    height: ScaleS(16)
  },
  rightImg: {},
  personPropsView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: ScaleS(5)
  },
  genderText: {
    color: '#CCCCCC',
    fontSize: ScaleT(12),
    fontWeight: '400'
  },
  tagImg: {
    width: ScaleS(18),
    marginRight: ScaleS(3)
  },
  education: {
    flex: 1,
    textAlign: 'right',
    fontSize: ScaleT(13),
    fontWeight: '400',
    color: '#999999'
  },
  intro: {
    marginTop: ScaleS(23),
    fontSize: ScaleT(14),
    color: '#3c3c3c',
    lineHeight: ScaleS(18)
  },
  tagWrap: {
    marginTop: ScaleS(10),
    flexDirection: 'row'
  },
  tagText: {
    fontSize: ScaleT(14),
    marginRight: ScaleS(15),
    fontWeight: '400',
    color: '#CCCCCC'
  },
  bottomRightText: {
    color: '#999999',
    fontSize: ScaleT(13),
    fontWeight: '400'
    // marginTop: ScaleS(15)
  },
  bottomAddressView: {
    height: ScaleS(39),
    alignItems: 'center',
    flexDirection: 'row',
    marginTop: ScaleS(13)
  },
  addressView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  locationImg: {
    width: ScaleS(11),
    height: ScaleS(16)
  },
  addressText: {
    marginLeft: ScaleS(14),
    color: '#CCCCCC',
    fontSize: ScaleT(13),
    fontWeight: '400'
  }
})
